<template>
	<view class="page">
		<headerinfo></headerinfo>
		<!-- <headertop :inv="5"></headertop> -->
		<backos></backos>
		<!-- <u-navbar title="修改个人信息" :placeholder="true" :autoBack="true"></u-navbar> -->
		<view class="changeMy">
			<view class="list">
				<view class="label">
					昵称
				</view>
				<u--input class="input" placeholder="请输入" border="surround" clearable
					v-model="form.nickname"></u--input>
			</view>
			<view class="list">
				<view class="label">
					真实姓名
				</view>
				<u--input class="input" placeholder="请输入" border="surround" clearable
					v-model="form.realname"></u--input>
			</view>
			<view class="list"  @click="dateVisible1 = true">
				<view class="label">
					生日
				</view>
				<view :class="form.birthday?'color333':''" class="valbox">{{form.birthday?form.birthday:'请选择生日'}}</view>
			</view>
			<view class="list">
				<view class="label">
					所在地
				</view>
				<u--input class="input" placeholder="请输入" border="surround" clearable
					v-model="form.location"></u--input>
			</view>
			<view class="list">
				<view class="label">
					生平
				</view>
				<u--textarea  border="surround" clearable v-model="form.remark" placeholder="请输入" ></u--textarea>
			</view>
			<view class="list changeMysss">
				<view class="label">
					性别
				</view>
				<u-radio-group v-model="form.sex">
					<u-radio style="margin-right: 40rpx;" name="male" label="男"></u-radio>
					<u-radio name="female" label="女"></u-radio>
				</u-radio-group>
			</view>
			
			<!-- <view class="list changeMysss" style="margin-top: 20rpx;">
				<view class="label">
					是否展示共享文章
				</view>
				<u-radio-group v-model="form.showUserGuide">
					<u-radio :name="true" style="margin-right: 40rpx;"  label="展示"></u-radio>
					<u-radio :name="false" label="不展示"></u-radio>
				</u-radio-group>
			</view> -->
			

		</view>
		<view class="btn" @click="rightClick">
			保存
		</view>
		
		<w-picker :value="form.birthday" :visible.sync="dateVisible1" mode="date" startYear="1920" endYear="2099" :current="false"
			fields="day" @confirm="onConfirm($event)" :disabled-after="false" ref="date1"></w-picker>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dateVisible1:false,
				form: {
					realname: '',
					remark: '',
					location: '',
					nickname: '',
					sex: '',
					birthday: '',
					// showUserGuide:true
				}
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			onConfirm(e) {
				this.form.birthday = e.result
			},
			getData() {
				this.$api.myInfo().then(res => {
					this.form = res
				})
			},

			rightClick() {
				
				if (this.form.nickname == '') {
					return this.$Show.show('昵称不能为空')
				}
				
				// if (this.form.realname == '') {
				// 	return this.$Show.show('真实姓名不能为空')
				// }

				this.$api.upateUserInfo(this.form).then(res => {
					uni.setStorageSync('needRefresh', 1)
					this.$Show.successJump('修改成功')
				})
			}
		}
	};
</script>


<style>
	.changeMysss .u-radio {
		margin-right: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.page {
		background-color: #fff;
	}
	.color333{
		color: #333!important;
	}

	.changeMy {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		.list {
			margin-bottom: 20rpx;

			.label {
				margin-bottom: 10rpx;
			}

			.valbox {
				border-radius: 4px;
				border-width: 0.5px !important;
				border-color: #dadbde !important;
				border-style: solid;
				height: 70rpx;
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				color: #b9b9b9;
				
			}
		}

		.u-input {
			height: 100rpx;
			margin-left: 0;
			border: none;
			box-sizing: border-box;
			border-radius: 4px;
			    border-width: 0.5px !important;
			    border-color: #dadbde !important;
			    border-style: solid;
			    height: 35px;
			    display: flex;
			    align-items: center;
			    padding-left: 10px;
				background-color: #f2f2f2;
		}
	}

	.btn {
		width: 700rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		margin: 50rpx auto;
		background-color: #de4849;
		color: #fff;
	}
</style>